<template>
  <div class="address-edit-box">
    <s-header :name="`${type == 'add' ? '新增地址' : '编辑地址'}`" />
    <van-address-edit
      class="edit"
      :area-list="areaList"
      :show-delete="type == 'edit'"
      show-set-default
      show-search-result
      :address-info="addressInfo"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import sHeader from "../components/simpleHeader/index";
import { tdist } from "@/common/js/utils";
import { useRoute, useRouter } from "vue-router";
import { addAddress, DeleteAddress, EditAddress, getAddressDetail } from "../api/address";
import { Toast } from 'vant';
export default {
  name: "AddressEdit",
  components: {
    sHeader,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      areaList: {
        province_list: {},
        city_list: {},
        county_list: {},
      },
      addressInfo: {}, // 收货人的信息初始值
      type: "add",
      addressId: "",
      from: "",
    });
    onMounted(async () => {
      // 省市区列表构造
      let _province_list = {};
      let _city_list = {};
      let _county_list = {};
      tdist.getLev1().forEach((p) => {
        _province_list[p.id] = p.text;
        tdist.getLev2(p.id).forEach((c) => {
          _city_list[c.id] = c.text;
          tdist.getLev3(c.id).forEach((q) => (_county_list[q.id] = q.text));
        });
      });
      state.areaList.province_list = _province_list;
      state.areaList.city_list = _city_list;
      state.areaList.county_list = _county_list;
      const { type, addressId, from } = route.query;
      state.type = type;
      console.log(state.type, "state.type");
      state.addressId = addressId;
      state.from = from || "";
      if (type == "edit") {
        // 如果是标记默认有初始值
        const { data: addressDetail } = await getAddressDetail(addressId);
        console.log(addressDetail, "edit");
        let _areaCode = "";
        const province = tdist.getLev1();
        Object.entries(state.areaList.county_list).forEach(([id, text]) => {
          // 先找出当前对应的区
          if (text == addressDetail.regionName) {
            // 找到区对应的几个省份
            const provinceIndex = province.findIndex(item => item.id.substr(0, 2) == id.substr(0, 2))
            // 找到区对应的几个市区
            // eslint-disable-next-line no-unused-vars
            const cityItem = Object.entries(state.areaList.city_list).filter(([cityId, cityName]) => cityId.substr(0, 4) == id.substr(0, 4))[0]
            // 对比找到的省份和接口返回的省份是否相等，因为有一些区会重名
            if (province[provinceIndex].text == addressDetail.provinceName && cityItem[1] == addressDetail.cityName) {
              _areaCode = id
            }
          }
        })
        state.addressInfo = {
            id: addressDetail.addressId,
            name: addressDetail.userName,
            tel: addressDetail.userPhone,
            province: addressDetail.provinceName,
            city: addressDetail.regionName,
            addressDetail: addressDetail.detailAddress,
            areaCode: _areaCode,
            isDefault: !!addressDetail.defaultFlag
        }
        console.log(state.addressInfo,'state.addressInfo')
      }
    });
    const onDelete = async () => {
        await DeleteAddress(state.addressId)
        Toast('删除成功')
        setTimeout(() => {
            router.back()
        },1000)
    }
    const onSave = async (content) => {
        console.log(content,'content')
        const params = {
            userName: content.name,
            userPhone: content.tel,
            provinceName: content.province,
            cityName: content.county,
            detailAddress: content.addressDetail,
            defaultFlag: content.isDefault ? 1 : 0
        }
        if (state.type == 'edit')  {
            params['addressId'] = state.addressId
        }
        await state.type == 'add' ? addAddress(params) : EditAddress(params)
        Toast('保存成功')
        setTimeout(() => {
            router.back()
        },1000)
    }
    return {
      ...toRefs(state),
      onSave,
      onDelete
    };
  },
};
</script>

<style lang='less'>
@import "../common/style/mixin";
.edit {
  .van-field__body {
    textarea {
      height: 26px !important;
    }
  }
}
.address-edit-box {
  margin-top: 44px;
  .van-address-edit {
    .van-button--danger {
      background: @primary;
      border-color: @primary;
    }
    .van-switch--on {
      background: @primary;
    }
  }
}
</style>